<template>
  <div class="biaozha">
    <!-- 新鲜好物 -->
    <xxhw-view
      class="title"
      :title="title"
      :total="total"
      :xxhw="xxhw"
      ref="refxx"
    >
      <template #title>
        <RouterLink to="/" class="xtx-more">
          <span>查看全部</span>
          <i
            class="iconfont icon-angle-right"
            style="background: none; color: #ccc"
          ></i>
        </RouterLink>
      </template>
    </xxhw-view>
    <!-- 人气推荐 -->
    <renqi-view
      class="title"
      :titler="titler"
      :totalr="totalr"
      :rqtj="rqtj"
      ref="refqr"
    >
      <template #title>
        <RouterLink to="/" class="xtx-more"> </RouterLink>
      </template>
    </renqi-view>
    <!-- 热门品牌 -->
    <rmpp-view
      class="title ti"
      :titleremen="titleremen"
      :totalguoji="totalguoji"
      :rmpp="rmpp"
      ref="refrm"
    >
      <template #title>
        <RouterLink to="/" class="xtx-more">
          <a href="javascript:;" class="iconfont icon-angle-left prev"></a>
          <a href="javascript:;" class="iconfont icon-angle-right next"></a>
        </RouterLink>
      </template>
    </rmpp-view>
  </div>
</template>

<script>
import XxhwView from "../utils/XxhwView.vue";
import RenqiView from "../utils/RenqiView.vue";
import RmppView from "../utils/RmppView.vue";
import { getXxhw, getRqtj, getPopular } from "@/utils/api/headerapi";
import { lazyload } from "@/utils/constfun";
export default {
  components: {
    XxhwView,
    RenqiView,
    RmppView,
  },
  data() {
    return {
      title: "新鲜好物",
      total: "新鲜出炉 品质靠谱",
      titler: "人气推荐",
      totalr: "人气爆款 不容错过",
      titleremen: "热门品牌",
      totalguoji: "国际经典 品质保证",
      xxhw: [],
      rqtj: [],
      rmpp: [],
    };
  },
  mounted() {
    // 数据懒加载
    // this.getXxhw();
    lazyload(this.$refs.refxx.$el, this.getXxhw);
    // console.log(this.$refs.refxx.$el);
    // this.getRqtj();
    lazyload(this.$refs.refqr.$el, this.getRqtj);
    // this.getRmpp();
    lazyload(this.$refs.refrm.$el, this.getRmpp)
  },
  methods: {
    async getXxhw() {
      let res = await getXxhw();
      this.xxhw = res.result;
    },
    async getRqtj() {
      let res = await getRqtj();
      this.rqtj = res.result;
    },
    async getRmpp() {
      let res = await getPopular();
      this.rmpp = res.result;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/color.scss";
.biaozha {
  width: 100%;
  background: #fff;
  .title {
    width: 1240px;
    height: 540px;
    margin: auto;
  }
  .ti {
    height: 460px;
    // background: #ccc;
  }

  .iconfont {
    width: 20px;
    height: 20px;
    background: #ccc;
    color: #fff;
    display: inline-block;
    text-align: center;
    margin-left: 5px;
    background: $xtxColor;
    &::before {
      font-size: 12px;
      position: relative;
      top: -2px;
    }
    &.disabled {
      background: #ccc;
      cursor: not-allowed;
    }
  }
}
</style>